.constraint-root{
	width: 100%;
    height: 200px;
	position: relative;
	min-width: 210px;
	max-width: 300px;
}

.constraint-root .panel-container{
	left: 40px;
    right: 40px;
    top: 28px;
    bottom: 30px;
    position: absolute;
    background: #cccccc;
    border: 1px solid #282828;
}

.constraint-root .comps-container{
	position: absolute;
}
.constraint-root .comps-container.top{
	top: 0px;
	height: 28px;
	left: 40px;
	right: 40px;
	display: flex;
    align-items: flex-end;
    justify-content: space-between;
	padding-bottom: 6px;
	padding-right: 4px;
    padding-left: 4px;
}
.constraint-root .comps-container.bottom{
	bottom: 0px;
	height: 30px;
	left: 35px;
	right: 35px;
	display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.constraint-root .comps-container.right{
	top: 28px;
    right: 0px;
    width: 40px;
	bottom: 30px;
	display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
}
.constraint-root .comps-container.left{
	top: 28px;
    left: 0px;
    width: 40px;
	bottom: 28px;
	display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    padding-top: 4px;
    padding-bottom: 8px;
    padding-right: 6px;
}
.constraint-root .comps-container .checkbox{
	font-size: 30px;
    flex-grow: 0;
    flex-shrink: 0;
}
.constraint-root .comps-container .numberInput{
	max-width: 34px;
    flex-grow: 0;
    flex-shrink: 0;
}
.constraint-root .comps-container .numberInput.hide{
	visibility: hidden;
}

.constraint-root .sub-container{
	position: absolute;
	top: 10px;
	bottom: 10px;
	right: 10px;
	left: 10px;
}

.constraint-root .constraint-panel{
	position: absolute;
	width: 70px;
    height: 60px;
    background: #888888;
    border: 2px solid #555555;
	border-radius: 5px;
	transition: all 0.2s ease-out;
	left:0px;
	top: 0px;
}
.constraint-panel .title-bar{
	width: 100%;
	height: 16px;
	background: #555555;
}

.constraint-root .line{
	background: #388dff;
	position: absolute;
}
.constraint-root .line.hide{
	visibility: hidden;
}


.constraint-root .line.left{
	height: 100%;
	width: 2px;
	left: 10px;
	top: 0
}
.constraint-root .line.horizontalCenter{
	height: 100%;
	width: 2px;
	left: calc( 50% - 1px );
	top: 0
}
.constraint-root .line.right{
	height: 100%;
	width: 2px;
	right: 10px;
	top: 0
}

.constraint-root .line.top{
	height: 2px;
	width: 100%;
	top: 10px;
	left: 0
}
.constraint-root .line.verticalCenter{
	height: 2px;
	width: 100%;
	top: calc( 50% - 1px );
	left: 0
}
.constraint-root .line.bottom{
	height: 2px;
	width: 100%;
	bottom: 10px;
	left: 0
}


.constraint-root .constraint-panel.left{
	left: 0px ;
}
.constraint-root .constraint-panel.right{
	left: calc( 100% - 70px );
}
.constraint-root .constraint-panel.left.right{
	left: 0px !important;
	width: 100% !important;
}

.constraint-root .constraint-panel.top{
	top: 0px;
}
.constraint-root .constraint-panel.bottom{
	top: calc( 100% - 60px );
}
.constraint-root .constraint-panel.top.bottom{
	top: 0px !important;
	height: 100% !important;
}

.constraint-root .constraint-panel.horizontalCenter{
	left: calc( 50% - 35px );
}
.constraint-root .constraint-panel.verticalCenter{
	top: calc( 50% - 30px );
}
.constraint-root .constraint-panel.verticalCenter.horizontalCenter{
	top: calc( 50% - 30px );
	left: calc( 50% - 35px );
}

